<!--侧边栏标题-->
<script setup lang="ts">
const appBarStyle = useAppBarStyle();
</script>
<!--导航栏-->
<template>
  <div class="">
    <NuxtLink to="/">
      <!--    原代码  <div :class="appBarStyle.shop" class="mx-3">，删除了 :class="appBarStyle.shop",默认选中状态-->
      <div :class="appBarStyle.shop" class="mx-3">
        <v-btn
          flat
          elevation="0"
          height="45"
          rounded="0"
          class="font-buttershine-serif text-[#413e3a] app-bar-btn px-1"
          >{{ $t("shop.appBar.title[0].name") }}
        </v-btn>
      </div>
    </NuxtLink>

    <NuxtLink to="/products">
      <div class="mx-3">
        <v-btn
          flat
          elevation="0"
          height="45"
          rounded="0"
          class="font-buttershine-serif text-[#413e3a] app-bar-btn px-1"
          >{{ $t("shop.appBar.title[1].name") }}
        </v-btn>
      </div>
    </NuxtLink>

    <!-- <NuxtLink to="/videos">
      <div :class="appBarStyle.videos" class="mx-3">
        <v-btn flat height="45" rounded="0" class="font-buttershine-serif text-[#413e3a] app-bar-btn px-1">{{
            $t('shop.appBar.title[1].name')
          }}
        </v-btn>
      </div>
    </NuxtLink> -->

    <!--        原class中的 text值为text-[#413e3a]-->
    <div class="mx-3 relative childbox">
      <v-btn
        flat
        height="45"
        rounded="0"
        class="font-buttershine-serif text-[#fff] app-bar-btn px-1 childbtn"
        >EXPLORATION
      </v-btn>
      <div class="nav-dropdown">
        <NuxtLink to="/dynamic">
          <div class="nav-dropdown-item">
            <img src="/public/nav/nav-1.jpeg" alt="nav-1" />
            <div class="nav-dropdown-item__body">
              <v-btn
                flat
                height="45"
                rounded="0"
                class="font-buttershine-serif text-[#fff] app-bar-btn px-1"
                >News
              </v-btn>
            </div>
          </div>
        </NuxtLink>
        <NuxtLink to="/product-testing">
          <div class="nav-dropdown-item">
            <img src="/public/nav/nav-2.jpeg" alt="nav-2" />
            <div class="nav-dropdown-item__body">
              <v-btn
                flat
                height="45"
                rounded="0"
                class="font-buttershine-serif text-[#fff] app-bar-btn px-1"
                >Testing
              </v-btn>
            </div>
          </div>
        </NuxtLink>
        <NuxtLink to="/product-gallery">
          <div class="nav-dropdown-item">
            <img src="/public/nav/nav-3.jpeg" alt="nav-3" />
            <div class="nav-dropdown-item__body">
              <v-btn
                flat
                height="45"
                rounded="0"
                class="font-buttershine-serif text-[#fff] app-bar-btn px-1"
                >Gallery
              </v-btn>
            </div>
          </div>
        </NuxtLink>
      </div>
    </div>
    <NuxtLink to="/faq">
      <div :class="appBarStyle.faq" class="mx-3">
        <v-btn
          flat
          height="45"
          rounded="0"
          class="font-buttershine-serif text-[#fff] app-bar-btn px-1"
          >{{ $t("shop.appBar.title[3].name") }}
        </v-btn>
      </div>
    </NuxtLink>
    <!-- <NuxtLink to="/about-us">
      <div :class="appBarStyle.aboutUs" class="mx-3">
        <v-btn
          flat
          height="45"
          rounded="0"
          class="font-buttershine-serif text-[#fff] app-bar-btn px-1"
          >{{ $t("shop.appBar.title[4].name") }}
        </v-btn>
      </div>
    </NuxtLink> -->
    <div class="mx-3 relative childbox">
      <v-btn
        flat
        height="45"
        rounded="0"
        class="font-buttershine-serif text-[#fff] app-bar-btn px-1 childbtn"
        >ABOUT US
      </v-btn>
      <div class="nav-dropdown">
        <NuxtLink to="/our-curtrue">
          <div class="nav-dropdown-item">
            <img src="/public/nav/c-1.jpg" alt="c-1" />
            <div class="nav-dropdown-item__body">
              <v-btn
                flat
                height="45"
                rounded="0"
                class="font-buttershine-serif text-[#fff] app-bar-btn px-1"
                >OUR CURTRUE
              </v-btn>
            </div>
          </div>
        </NuxtLink>
        <NuxtLink to="/our-production-line">
          <div class="nav-dropdown-item">
            <img src="/public/nav/c-2.jpg" alt="c-2" />
            <div class="nav-dropdown-item__body">
              <v-btn
                flat
                height="45"
                rounded="0"
                class="font-buttershine-serif text-[#fff] app-bar-btn px-1"
                >OUR PRODUCTION LINE
              </v-btn>
            </div>
          </div>
        </NuxtLink>
      </div>
    </div>
    <NuxtLink to="/contact-us">
      <div :class="appBarStyle.contactUs" class="mx-3">
        <v-btn
          flat
          height="45"
          rounded="0"
          class="font-buttershine-serif text-[#fff] app-bar-btn px-1"
          >{{ $t("shop.appBar.title[5].name") }}
        </v-btn>
      </div>
    </NuxtLink>
  </div>
</template>

<style lang="scss" scoped>
/**
  * 指定页面时候，标题按钮固定颜色不变
  * 由default.global.ts全局路由守卫控制这两个样式
 */
/**
原：hover:border-b-[#786554];
 */
.app-bar-div-select {
  @apply border-b-4 border-b-transparent border-b-[#555];
}

/**
  * 正常效果
  * 由default.global.ts全局路由守卫控制这两个样式
 */
/**
原：hover:border-b-[#786554];
 */
.app-bar-div {
  @apply border-b-4 border-b-transparent hover:border-b-[#fff];
}

/**
原app-bar-btn中的 text值为text-[#413e3a]
 */
.app-bar-btn {
  @apply text-base  text-[#fff];
}

.radio-input input {
  display: none;
}
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background-color: #fff;
  display: none;
  .nav-dropdown-item {
    @apply bg-[#F5F5F5];
    position: relative;
    width: 270px;
    height: 160px;
    overflow: hidden;
    img {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 101;
      transition: 0.6s;
    }
    .nav-dropdown-item__body {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 103;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      ::v-deep .v-btn__content {
        font-size: 20px;
        color: #fff;
      }
    }
    &:hover {
      img {
        transform: scale(1.4);
      }
    }
  }
}
.childbox:hover {
  .nav-dropdown {
    display: flex;
  }
}
</style>